<template>
	<el-input
	    v-model="keyword"
	    placeholder="请输入宿舍号"
	    class="input-with-select"
		style="width:100%"
		clearable
	>
	    <template #append>				
	        <el-button @click="search"><el-icon><Search /></el-icon></el-button> 
	    </template>        
	</el-input>
		<el-radio-group v-model="tableLayout">
	    <el-radio-button label="fixed" />
	    <el-radio-button label="auto" />
	  </el-radio-group>
	<el-table
	  :data="tableData"
	  style="width: 100%"
	  stripe
	  ref="multipleTable"
	   @selection-change="handleSelectionChange"
	   :header-cell-style="{background:'#eef1f6',color:'#606266'}"
	   :table-layout="tableLayout"
	>

	  
		<el-table-column min-width="15%" type="selection"></el-table-column>
		<el-table-column prop="id" label="id" sortable  />
		<el-table-column prop="dorm_no" label="宿舍号" sortable  />
		<el-table-column prop="building" label="宿舍楼" sortable />
		<el-table-column prop="grade" label="卫生评级" sortable />
		<el-table-column prop="lastGrade" label="上次卫生评级" sortable />
		<el-table-column prop="tot_grade" label="整体评级" sortable />
		<el-table-column prop="reason" label="未达标原因" sortable />
	  </el-table>
	  
	 <!-- 分页组件 -->
	<el-pagination
	  small
	  background
	  layout="prev, pager, next"
		:page-size="pageSize"
		:page-count="pageCount"
		:current-page="currentPage"
		@current-change="haddlePageChange"
	/> 
</template>

<script setup>
	import {ref,toRefs,reactive,onMounted,getCurrentInstance} from 'vue'	
	
	const tableLayout = ref('fixed')
	let { proxy } = getCurrentInstance();
	//每页几条数据，初始值设置为10条
	var pageSize=ref(10)
	//当前页码，初值是1
	var currentPage=ref(1)
	//总页数
	var pageCount=ref(0)
	//表格用数据，初始为空
	let tableData=ref([]);
	
	function handleChange (item) {
		console.log('change', item)
	}

	function getTableData(){
		var param = { "pagination": {"pageNo":currentPage.value,"pag  eSize":pageSize.value}, "conditionList":[]};
		var jsonparam = JSON.stringify(param) 
		proxy.$http.post('/SanitaryCommonsFindAll',jsonparam)
		.then(res => {
			tableData.value=res.data.records;//把获取的服务端数据数组传递给tableData
			//后台返回总页数
			pageCount.value=res.data.totalPages;
			//console.log(tableData.vale)
		})
		.catch(err => {
			console.log(err)
		});
	}
	
	//onMounted钩子函数，组件加载完自动执行
	onMounted(()=>{
		getTableData();  //请求第一页的表格数据
	});
	
	//点击改变页码时，当前页改变，根据新的URL参数重新获取后台数据
	function haddlePageChange(currentpage){			
		currentPage.value=currentpage;
		getTableData();
		
	}
	const keyword=ref('')
	let search=()=>{
		if(keyword.value!='')
			keyword.value!=null
		var param = { "pagination": {"pageNo":currentPage.value,"pageSize":pageSize.value}, "conditionList":[
	    {"value":keyword.value,"key":"宿舍号	 ","operator":"like"},
		]};
		var jsonparam = JSON.stringify(param) 
		proxy.$http.post("SanitaryCommonsFindAll",jsonparam)
		.then(res => {
			tableData.value=res.data.records;//把获取的服务端数据数组传递给tableData
			//总页数
			pageCount.value=Math.ceil(res.data.totalNum/pageSize.value);
			keyword.value==''
			if(res.data.totalNum ==0 && keyword.value !=null)
			alert(res.data.message)
		})
		.catch(err => {
			console.log(err)
		});
	}
	
</script>
